<template>
  <ViewBox>
    <ControlItem v-for="(d, i) of dataCore.controls" :key="i" :d="d" :index="i" />
  </ViewBox>
</template>

<script>
import dataApi from './data-api'
import ViewBox from './ViewBox'
import ControlItem from './Controls/IndexView'
export default {
  components: {
    ViewBox,
    ControlItem
  },
  computed: {
    dataCore () {
      return dataApi.core
    },
    videos () {
      let videos = []
      dataApi.core.controls.forEach(d => {
        if (d.type === 5) {
          videos.push(d)
        }
      })
      return videos
    },
    hasVideo () {
      return this.videos.length
    }
  },
  watch: {
    videos () {
      this.updateVideo()
    }
  },
  created () {
    this.updateVideo()
  },
  methods: {
    updateVideo () {
      if (window.jselectronic && window.jselectronic.videoControl) {
        window.jselectronic.videoControl(JSON.stringify(this.videos))
      }
    }
  }
}
</script>
